<template>
  <div>
    <div class="wrapper">
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="item in imgUrl" :key="item.id"><img :src="item.url" alt="" ></swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
    <div>美佳儿超级耐人</div>
  </div>
</template>

<script>

    export default {
        name: "HomeSwiper",
        data(){
          return{
            swiperOption:{
              //和官网swiper配置一模一样
              pagination:".swiper-pagination",
              loop:true,
              autoplay:20000000
            },
            imgUrl:[
              {
                id:"001",
                url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/b421363bbbb9184deacb4247eeea7485.jpg_750x200_12b42643.jpg"
              },
              {
                id:"002",
                url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/13484aec53ee7364ad3e2b95828c2446.jpg_750x200_0e31fdea.jpg"
              },
              {
                id:"003",
                url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/bc62e131afb380e98e4beac33e751c6c.jpg_750x200_2e248116.jpg"
              },
              {
                id:"004",
                url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/e440c31af79c0b9d1a1e84c577205562.jpg_750x200_0729c45b.jpg"
              },
              {
                id:"005",
                url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/b421363bbbb9184deacb4247eeea7485.jpg_750x200_12b42643.jpg"
              },
              {
                id:"006",
                url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg_750x200_1f78af87.jpg"
              }
            ]
          }
        }
    }
</script>

<style scoped lang="stylus">
  .wrapper >>> .swiper-pagination-bullet-active//样式穿透
    background #eaeaea;
    .wrapper
      overflow hidden
      width 100%
      height 0
      padding-bottom 26.6666%
</style>
